<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			
			*{
				margin: 0;
				padding: 0;
			}
			ul li {
				list-style: none;
			}
			
			#main {
				width: 760px;
				height: 300px;
				position: relative;
				margin: 50px auto;
			}
			
			#main .pic {
				width: 760px;
				height: 300px;
				
				overflow: hidden;
			}
			#main .pic ul li {
				width: 760px;
				height: 300px;
				position: relative;
				
			}
			#main .pic ul li .img1 {
				position: absolute;
				top: 0;
				left: -760px;
			}
			#main .pic ul li .img2 {
				position: absolute;
				top: 0;
				left: -20px;
				display: none;
			}
			#main .nav {
				position: absolute;
				right: 20px;
				bottom: 20px;
			}
			#main .nav ul li {
				width: 10px;
				height: 10px;
				border: 1px solid #fff;
				float: left;
				margin-left: 5px;
			}
			#main .nav ul li.select{
				background: #fff;
			}
			
		</style>
		<script src="js/jquery-1.11.3.js"></script>
		<script>
		$(function(){
			function change(){
				$(".nav ul li").eq(index).addClass('select').siblings().removeClass('select');
				$(".pic ul li").eq(index).fadeIn(300).siblings().fadeOut(300);
				$(".pic ul li").eq(index).find(".img1").animate({left: "0px"}, "slow",function(){
					$(".pic ul li").eq(index).siblings().find(".img1").css({left: '-760px'});
					$(".pic ul li").eq(index).siblings().find(".img2").hide();
					$(".pic ul li").eq(index).find(".img2").show().animate({left: "0px"}, "slow",function(){
						$(".pic ul li").eq(index).siblings().find(".img2").css({left: '-20px'});
					});
				});
			}
			var index = 0;
			var $len = $(".nav ul li").length
			change()
			$(".nav ul li").mouseover(function() {
				index = $(this).index(".nav ul li")
				change()
			});
			var timer = setInterval(function(){
				index++;
				if (index==$len) {
					index = 0
				};
				change()
			}, 3000);
			$("#main").hover(function() {
				console.log(1)
				clearInterval(timer)
			}, function() {
				console.log(0)
				timer = setInterval(function(){
				index++;
				if (index==$len) {
					index = 0
				};
				change()
			}, 3000);
			});
		})
		</script>
	</head>
	<body>
		
		<div id="main">
			<div class="pic">
				<ul>
					<li style="background: url(img/bg1.jpg);">
						<img class="img1" src="img/text1.png"/>
						<img class="img2" src="img/con1.png"/>
					</li>
					<li style="background: url(img/bg2.jpg);">
						<img class="img1" src="img/text2.png"/>
						<img class="img2" src="img/con2.png"/>
					</li>
					<li style="background: url(img/bg3.jpg);">
						<img class="img1" src="img/text3.png"/>
						<img class="img2" src="img/con3.png"/>
					</li>
					<li style="background: url(img/bg4.jpg);">
						<img class="img1" src="img/text4.png"/>
						<img class="img2" src="img/con4.png"/>
					</li>
					<li style="background: url(img/bg5.jpg);">
						<img class="img1" src="img/text5.png"/>
						<img class="img2" src="img/con5.png"/>
					</li>
				</ul>
			</div>
			<div class="nav">
				<ul>
					<li class="select"></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<a href="javascript:void(0);" class="btn prev"></a>
			<a href="javascript:void(0);" class="btn next"></a>
		</div>
		<!-- <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			var $len = $(".pic ul li").size();
			var index = 0;//获取他第一个li
			var $pic = $(".pic ul li");
			myshow();//显示第一个li
			function myshow(){
				$pic.eq(index).find(".img1").animate({left:0},1000,function(){
				$pic.eq(index).find(".img2").css("display","block");
				$pic.eq(index).find(".img2").animate({left:0},1000);
			});
			};
			setInterval("change()",2500)//定时器
			function change(){ //轮播
				index++;
				if(index==$len){
					index = 0;
				}
					$pic.eq(index).fadeIn(300).siblings().fadeOut(300);
					$(".nav ul li").eq(index).addClass("select").siblings().removeClass("select");
					myshow();
					//还原上一个li
					$pic.eq(index).siblings().find(".img1").css("left","-760px");
					$pic.eq(index).siblings().find(".img2").css({"left":"-20px","display":"none"});
			}					
		</script>		 -->
	</body>
</html>
